<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Bird view')"></h3>
    </template>
    
    <!-- 传感器通道选择 -->
    <el-row :gutter="12">
      <el-col :span="12">
        <el-row :gutter="8" style="align-items: center;">
          <el-col :span="16">
            <span v-text="t('Object sensor channel')"></span>
          </el-col>
          <el-col :span="8">
            <el-select 
              v-model="birdViewStore.objectSensorChannel" 
              @change="onObjectChannelChange"
              style="width: 100%;"
            >
              <el-option 
                v-for="i in 12" 
                :key="i" 
                :value="i-1" 
                :label="String.fromCharCode(65 + i - 1)"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="8" style="align-items: center;">
          <el-col :span="16">
            <span v-text="t('Lane sensor channel')"></span>
          </el-col>
          <el-col :span="8">
            <el-select 
              v-model="birdViewStore.laneSensorChannel" 
              @change="onLaneChannelChange"
              style="width: 100%;"
            >
              <el-option 
                v-for="i in 8" 
                :key="i" 
                :value="i-1" 
                :label="String.fromCharCode(65 + i - 1)"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 显示选项 -->
    <el-row :gutter="8">
      <el-col :span="6">
        <el-checkbox 
          v-model="birdViewStore.showHeading"
          :label="t('Show heading')"
        ></el-checkbox>
      </el-col>
      <el-col :span="6">
        <el-checkbox 
          v-model="birdViewStore.showTrajectory"
          :label="t('Show trajectory')"
        ></el-checkbox>
      </el-col>
      <el-col :span="6">
        <el-checkbox 
          v-model="birdViewStore.showContour"
          :label="t('Show contour')"
        ></el-checkbox>
      </el-col>
      <el-col :span="6">
        <el-checkbox 
          v-model="birdViewStore.showFOV"
          :label="t('Show FOV')"
        ></el-checkbox>
      </el-col>
    </el-row>

    <!-- 画布 -->
    <el-row>
      <el-col :span="24">
        <canvas 
          ref="canvasRef" 
          class="bird-view-canvas"
          @mousedown="handleMouseDown"
          @mousemove="handleMouseMove"
          @wheel="handleMouseWheel"
        ></canvas>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useBirdViewStore } from '@/stores/birdView'
import { useLanguageStore } from '@/stores/language'

const birdViewStore = useBirdViewStore()
const languageStore = useLanguageStore()
const canvasRef = ref(null)

// 翻译函数
const t = (key) => {
  const translations = {
    'Bird view': {
      'en': 'Bird view',
      'zh': '俯瞰图'
    },
    'Object sensor channel': {
      'en': 'Object sensor channel:',
      'zh': '目标物传感器通道:'
    },
    'Lane sensor channel': {
      'en': 'Lane sensor channel:',
      'zh': '车道线传感器通道:'
    },
    'Show heading': {
      'en': 'Show heading',
      'zh': '显示朝向'
    },
    'Show trajectory': {
      'en': 'Show trajectory',
      'zh': '显示轨迹'
    },
    'Show contour': {
      'en': 'Show contour',
      'zh': '显示轮廓'
    },
    'Show FOV': {
      'en': 'Show FOV',
      'zh': '显示探测范围'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

// 通道变化处理函数
function onObjectChannelChange(event) {
  birdViewStore.setObjectSensorChannel(parseInt(event.target.value))
}

function onLaneChannelChange(event) {
  birdViewStore.setLaneSensorChannel(parseInt(event.target.value))
}

// 鼠标事件处理函数
function handleMouseDown(e) {
  if (e.buttons !== 1) return // 左键
  birdViewStore.handleMouseDown(e)
}

function handleMouseMove(e) {
  if (e.buttons !== 1) return // 左键
  birdViewStore.handleMouseMove(e)
}

function handleMouseWheel(e) {
  e.preventDefault() // 阻止默认滚动行为
  birdViewStore.handleMouseWheel(e)
}

onMounted(() => {
  birdViewStore.setCanvasRef(canvasRef.value)
})
</script>

<style scoped>
.bird-view-canvas {
  width: 100%;
  height: 600px;
  background-color: var(--el-fill-color);
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
}
</style> 